<template>
	<!-- 新建问候 —— 朋友的选择 -->
	<view class="friend-selection-box">
		<NavBar title="问候" :leftText="'取消'" :rightText="'完成'" @click-left="navBack" @click-right="onClickRight" />
		<scroll-view
			scroll-y
			class="scroll-view"
			:scroll-into-view="'scroll-view-' + listCurID"
			:style="[{ height: 'calc(100vh - ' + (CustomBar + inlineTools + StatusBar) + 'px)' }]"
			:scroll-with-animation="true"
			:enable-back-to-top="true"
		>
			<!-- 搜索 -->
			<view class="cu-bar search">
				<view class="search-form round">
					<text class="cuIcon-search"></text>
					<input type="text" v-model="keywords" placeholder="输入搜索的关键词" confirm-type="search" @input="search" />
				</view>
			</view>

			<!-- 从XX导入 -->
			<view class="import-list">
				<view class="import-item border-bottom-after" v-for="item in importList" @click="changeImport(item.type)">
					<view class="import-item__title">
						{{ item.title }}
					</view>
					<view class="arrow-left arrow-right"></view>
				</view>
			</view>

			<!-- 好友 -->
			<view class="contacts-list">
				<checkbox-group>
					<template v-for="(item, index) in contacts" :key="`contacts-list-${item}`">
						<view class="contacts-item-wrap border-bottom-after" v-if="!keywords || (keywords && item.searchShow)">
							<view class="padding" :id="'scroll-view-' + item.name">{{ item.name }}</view>
							<template v-for="(it, ind) in item.children">
								<view
									class="contacts-item"
									v-if="(keywords && it.search) || !keywords"
									@click.stop="checkboxChange(it)"
								>
									<checkbox :value="it.user_id" :checked="it.checked" @click.stop="checkboxChange(it)" />
									<view class="contacts-item-right border-bottom-after">
										<image :src="it.avatar" class="contacts-it-avatar" />
										{{ it.displayName || it.realname }}
									</view>
								</view>
							</template>
						</view>
					</template>
				</checkbox-group>
			</view>
		</scroll-view>

		<view v-if="!keywords" class="indexBar" :style="[{ height: 'calc(100vh - ' + CustomBar + 'px - 50px)' }]">
			<view class="indexBar-box" @touchstart="tStart" @touchend="tEnd">
				<view
					class="indexBar-item"
					v-for="(item, index) in contacts"
					:key="index"
					:id="index"
					@touchstart="getCur"
					@touchend="setCur"
				>
					{{ item.name || item.realname }}
				</view>
			</view>
		</view>

		<!--选择显示-->
		<view v-show="!hidden" class="indexToast">
			{{ listCur }}
		</view>

		<!-- 页脚的已选栏 -->
		<view class="footer-opt">
			<view @click="checkAll" class="check-all" v-show="!checkUsersList.length">全选</view>

			<view class="check-list" v-show="!!checkUsersList.length" @click="selectedListShow = !selectedListShow">
				<view class="check-list__left">
					<view class="arrow-top-wrap">
						<view class="arrow-left arrow-top"></view>
					</view>
					<view class="check-item" v-for="item in checkUsersList.slice(0, 3)">
						<image class="check-item__3-avatar" :src="item.avatar" />
					</view>
				</view>

				<view class="check-list__right">已选{{ checkUsersList.length }}个朋友</view>
			</view>
		</view>

		<!-- 已选好友列表 -->
		<Popup v-model:show="selectedListShow" position="bottom" round closeable class="selected-list-popup">
			<view class="title">已选好友（{{ checkUsersList.length }}）</view>
			<checkbox-group class="checkbox-group">
				<view
					v-for="item in checkUsersList"
					:key="item"
					@click.stop="checkboxChange(item)"
					class="selected-item border-bottom-after"
				>
					<checkbox :value="item.user_id" :checked="item.checked" @click.stop="checkboxChange(item)" />
					<image class="selected-item__avatar" :src="item.avatar" />
					<view class="selected-item__name">
						{{ item.realname }}
					</view>
				</view>
			</checkbox-group>
		</Popup>
	</view>
</template>

<script>
import NavBar from "@/components/NavBar/NavBar.vue"
import Popup from "@/components/Popup/Popup.vue"
import { navBack } from "@/utils/utils.js"
export default {
	data() {
		return {
			navBack: navBack,
			keywords: "",
			source: "",
			importList: [
				{
					type: "group",
					title: "从群聊导入",
				},
				{
					type: "label",
					title: "从标签导入",
				},
				{
					type: "sex",
					title: "按性别导入",
				},
				{
					type: "age",
					title: "按年龄导入",
				},
			],
			selectedListShow: false, //已选的好友列表
			searchList: [], //搜索列表
			listCurID: "",
			listCur: "",
			hidden: true,
		}
	},
	props: {
		checkLabelObj: {
			type: Object,
			default: {
				group: [],
				label: [],
				sex: [],
				age: [],
			},
		},
		checkUsersList: {
			type: Array,
			default: () => [],
		},
		// //所有的联系人
		contacts: {
			type: Array,
			default: () => [],
		},
		importType: {
			type: String,
			default: "",
		},
		friendSelectionShow: {
			type: Boolean,
			default: false,
		},
	},
	components: { NavBar, Popup },
	methods: {
		changeImport(type) {
			this.$emit("update:importType", type)

			this.$emit("update:friendSelectionShow", false)
		},
		onClickRight() {
			const filteredContacts = this.checkUsersList.map((contact) => ({
				id: contact.user_id,
				name: contact.realname,
			}))

			if (!filteredContacts.length) {
				uni.showToast({
					title: "请选择需要群发的对象",
					icon: "none",
				})
				return
			}
			const userIds = filteredContacts.map((item) => item.id).join(",")
			const userNames = filteredContacts.map((item) => item.name).join(",")

			const params = this.checkLabelObj
			const queryString = Object.keys(params)
				.filter((key) => params[key].length > 0) // 过滤掉空数组
				.map((key) => `${key}=${params[key].join(",")}`)
				.join("&")

			let str = ""
			filteredContacts.length && (str += `userIds=${userIds}&userNames=${encodeURIComponent(userNames)}`)
			queryString && (str += `${str.length ? "&" : ""}${queryString}`)

			uni.navigateTo({
				url: `/pages/greetings/mass-texting/mass-texting?${str}`,
			})
		},
		//搜索
		search() {
			const arr = this.$util.searchObject2(this.contacts, ["displayName", "name_py"], this.keywords, "")
			this.searchList.length = 0

			const newContacts = [...this.contacts]

			newContacts.map((item) => {
				item.children.map((child) => {
					child.search = false

					const existsInArray = arr.some((item) => item.user_id === child.user_id)
					if (existsInArray) {
						child.search = true // 将 search 改为 true
					}
				})
			})

			this.$emit("update:contacts", newContacts)
		},
		//全选
		checkAll() {
			const newContacts = [...this.contacts]

			newContacts.forEach((item) => {
				item.children.forEach((child) => {
					child.checked = true
				})
			})

			this.$emit("update:contacts", newContacts)
		},
		//选择
		checkboxChange(it) {
			const newContacts = [...this.contacts]

			newContacts.forEach((item) => {
				item.children.forEach((child) => {
					child.user_id == it.user_id && (child.checked = !child.checked)
				})
			})

			this.$emit("update:contacts", newContacts)
		},
		setCur(e) {
			this.hidden = true
			this.listCur = this.listCur
		},
		//获取文字信息
		getCur(e) {
			this.hidden = false

			this.listCur = this.contacts[e.target.id].name
		},
		//触发全部开始选择
		tStart() {
			this.hidden = false
		},
		//触发结束选择
		tEnd() {
			this.hidden = true
			this.listCurID = this.listCur
		},
	},
}
</script>

<style lang="scss" scoped>
@import "./index.scss";
</style>
